<template>
  <div class="login">
    <!-- <div class="my-logo"></div> -->
    <el-container class="my-login-container" style="">
      <el-main class="my-login-main">
        <div class="login-wrap">
          <h3 class="title">{{title}}</h3>
          <el-row class="login-form" :gutter="20">
            <el-col :span="24" v-if="mainLoginType===1">
              <el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-position="left" label-width="0px"
                class="">
                <el-form-item style="margin-bottom: 10px;">
                  <el-link class="login-tip-title" v-if="loginForm.loginType==1" type="primary">账号密码登录</el-link>
                  <el-link class="login-tip-title" v-if="loginForm.loginType==2" type="primary">手机验证码登录</el-link>
                </el-form-item>
                <el-form-item prop="username" v-if="loginForm.loginType==1">
                  <el-input v-model="loginForm.username" type="text" autocomplete="off" placeholder="请输入手机号">
                    <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
                  </el-input>
                </el-form-item>
                <el-form-item prop="password" v-if="loginForm.loginType==1">
                  <el-input v-model="loginForm.password" type="password" :show-password="true" autocomplete="off"
                    placeholder="请输入密码" @keyup.enter.native="handleLogin">
                    <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
                  </el-input>
                </el-form-item>
                <el-form-item prop="code" v-if="loginForm.loginType==1">
                  <el-input v-model="loginForm.code" autocomplete="off" placeholder="请输入验证码" style="width: 63%"
                    @keyup.enter.native="handleLogin">
                    <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
                  </el-input>
                  <div class="login-code">
                    <img ref="verifyCode" :src="codeUrl" @click="getCode">
                  </div>
                </el-form-item>
                <el-form-item v-if="loginForm.loginType==2">
                  <el-input v-model="loginForm.username" type="text" autocomplete="off" placeholder="请输入手机号">
                    <svg-icon slot="prefix" icon-class="phone" class="el-input__icon input-icon" />
                  </el-input>
                </el-form-item>
                <el-form-item v-if="loginForm.loginType==2">
                  <el-input placeholder="请输入短信验证码" v-model="loginForm.code" type="text" autocomplete="off">
                    <svg-icon style="vertical-align:-0.5rem;" slot="prefix" icon-class="validCode"
                      class="el-input__icon input-icon" />
                    <el-button slot="append" @click="handleSendSmsCode">{{countForm.countDownText}}</el-button>
                  </el-input>
                </el-form-item>
                <el-form-item style="width:100%;">
                  <el-row>
                    <el-col :span="12" v-if="false">
                      <el-link type="primary" v-if="loginForm.loginType==1" @click="handlePhoneLogin">手机验证码登录</el-link>
                      <el-link type="primary" v-if="loginForm.loginType==2" @click="handleBasicLogin">账号密码登录</el-link>
                    </el-col>
                    <el-col class="align-right" :span="24">
                      <el-button :loading="loading" size="medium" type="primary" @click.native.prevent="handleLogin">
                        <span v-if="!loading">登 录</span>
                        <span v-else>登 录 中...</span>
                      </el-button>
                    </el-col>
                  </el-row>
                  <el-row style="margin-top: 15px;" v-if="false">
                    <!-- <el-col :span="12"> -->
                    <!-- <el-link type="primary" type="primary" @click="handleRegister">新用户注册</el-link> -->
                    <!-- </el-col> -->
                    <el-col class="align-right my-el-col" :span="24">
                      <el-link type="info" v-if="loginForm.loginType==1" @click="handleForgetPwd">忘记密码</el-link>
                    </el-col>
                  </el-row>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        </div>
      </el-main>
      <el-aside class="my-login-aside" width="30%">
        <div class="right-content"></div>
      </el-aside>
    </el-container>
  </div>
</template>

<script>
  import {
    getVerifyCode,
    getLoginQrcode,
    checkQrCodeLoginStatus
  } from '@/api/login'
  import {
    isvalidPhone
  } from '@/utils/validate'
  import defaultSettings from '@/settings'
  export default {
    name: 'login',
    data() {
      return {
        title: '欢迎使用永友云',
        codeUrl: '',
        loginForm: {
          loginType: 1,
          username: '',
          password: '',
          code: '',
          uuid: '',
          codeGuid: ''
        },
        loginRules: {
          username: [{
            required: true,
            trigger: 'blur',
            message: '用户名不能为空'
          }],
          password: [{
            required: true,
            trigger: 'blur',
            message: '密码不能为空'
          }],
          code: [{
            required: true,
            trigger: 'change',
            message: '验证码不能为空'
          }],
          phoneNumber: [{
            required: true,
            trigger: 'change',
            message: '手机号码不能为空'
          }],
          smsCode: [{
            required: true,
            trigger: 'change',
            message: '验证码不能为空'
          }],
        },
        loading: false,
        countForm: {
          count: 60,
          countDownText: '获取验证码',
          isCounting: false
        },
        mainLoginType: 1,
        qrCodeForm: {
          id: 0,
          qrCodePath: '',
          scanStatus: 1
        },
        qrCodeTimeOut: null,
      }
    },
    created() {
      this.getCode()
    },
    methods: {
      getCode() {
        if (this.loginForm.loginType != 1) {
          return;
        }
        getVerifyCode().then(res => {
          this.codeUrl = res.outputData.captchaCode
          this.loginForm.uuid = res.outputData.captchaGUID
        })
      },
      handleLogin() {
        var that = this;
        this.$refs.loginForm.validate(valid => {
          const user = {
            account: this.loginForm.username,
            pwd: this.loginForm.password,
            code: this.loginForm.code,
            uuid: this.loginForm.uuid
          }
          if (valid) {
            this.loading = true
            this.$store
              .dispatch('Login', user)
              .then(res => {
                this.loading = false
                if (res.status) {
                  setTimeout(() => {
                    this.$router.go(0)
                  }, 0)
                } else {
                  this.getCode()
                }
              })
              .catch(() => {
                this.loading = false
                this.getCode()
              })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      handleRegister() {
        this.$router.push({
          path: '/register'
        })
      },
      handleForgetPwd() {
        this.$router.push({
          path: '/retrievepwd'
        })
      },
      handlePhoneLogin() {
        this.loginForm.loginType = 2;
      },
      handleBasicLogin() {
        this.loginForm.loginType = 1;
      },
      handleSendSmsCode() {
        var that = this;
        if (that.countForm.isCounting) {
          return;
        }
        if (!that.loginForm.username) {
          this.$notify.error({
            title: '手机号码不能为空',
          });
          return;
        }
        if (!isvalidPhone(that.loginForm.username)) {
          this.$notify.error({
            title: '请输入正确的手机号码',
          });
          return;
        }
        that.countForm.isCounting = true;
        that.countForm.count = 60;
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss">
  .my-logo{
    position: fixed;
    top: 10px;
    left: 10px;
    width: 137px;
    height: 40px;
    background-image: url(../assets/images/login_logo.png);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 999;
  }
  .my-login-container {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
  }

  .my-login-main {
    padding: 0;
    position: relative;
  }

  .my-login-aside {
    padding: 0;
    margin: 0;
  }

  .right-content {
    height: 100%;
    background-size: cover;
    background-image: url(../assets/images/login_bg.jpg);
    background-position: center center;
    background-repeat: no-repeat;
  }

  .login-tip-title {
    border-bottom: solid 2px #46a6ff;
    line-height: 30px;
  }

  .login-wrap {
    width: 360px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -225px;
    margin-left: -180px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2)
  }

  .title {
    margin: 30px 0 10px 25px;
    text-align: left;
    font-size: 22px;
  }

  .login-form {
    margin: 0 !important;
    border-radius: 6px;
    padding: 0 15px 0 15px;
  }

  .col-right {
    height: 100%;
  }

  .col-right img {
    width: 100%;
    height: 100%;
  }

  .login-form .el-input {
    height: 39px;

    input {
      height: 39px;
    }
  }

  .login-form .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 2px;
  }

  .login-form .login-tip {
    font-size: 13px;
    text-align: center;
    color: #bfbfbf;
  }

  .login-code {
    width: 33%;
    display: inline-block;
    height: 38px;
  }

  .login-code img {
    cursor: pointer;
    vertical-align: middle;
  }

  .align-right {
    text-align: right;
  }

  .align-center {
    text-align: center;
  }

  .box {
    margin-top: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .qrcode {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    position: relative;
  }

  .qrcode img {
    width: 100%;
  }

  .qrcodetxt {
    padding: 10px 0;
    text-align: center;
  }

  .qrcodetxt span {
    text-align: center;
    font-size: 18px;
    color: #42b983;
  }

  .qrcodecover {
    position: absolute;
    top: 0;
    width: 200px;
    height: 200px;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    text-align: center;
    padding-top: 90px;
  }
  .my-login-main .el-link{
    font-size: 15px;
  }
</style>
